<template>
  <div class="app-container">
    <el-button @click="getList">查询</el-button>
    <el-button @click="addUser">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
      />
      <el-table-column
        prop="name"
        label="姓名"
      />
      <el-table-column
        prop="userName"
        label="用户名"
      />
      <el-table-column
        prop="age"
        label="年龄"
      />
      <el-table-column
        prop="sex"
        label="性别"
      />
    </el-table>
    <user-info ref="userInfo" />
  </div>
</template>
<script>
import { getUsers } from '@/api/myuser'
import UserInfo from './user-info'
export default {
  name: 'User',
  components: { UserInfo },
  data() {
    return {
      dataForm: {
        id: 1
      },
      tableData: []
    }
  },
  methods: {
    getList() {
      getUsers(this.dataForm).then(data => {
        this.tableData = data.data
      })
    },
    addUser() {
      this.$refs.userInfo.init()
    }
  }
}
</script>

<style scoped>

</style>
